<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="telephone=no,email=no" name="format-detection"/>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="pt-start">
    <div class="pt-start-gz">活动规则</div>
    <div class="pt-start-title">
        <img src="images/pt-title.png" alt="">
    </div>
    <div class="pt-start-btn">
        <img src="images/pt-start.png" alt="">
    </div>
</div>
<div class="pt-gz">
    <div class="pt-gz-close"><img src="images/pt-gz-close.png" alt=""></div>
    <div class="pt-gz-title">
        <img src="images/pt-gz-title.png" alt="">
    </div>
    <p>1. 通过任意挪动，把12张错乱图片拼组成一张完整的图；<br>2. 时间限制为30s，超过即任务失败。</p>
</div>
<div class="pt-content">
    <div class="pt-content-box">
        <div class="pt-content-hd">
            <div class="pt-progress-warp">
                <div class="pt-progress-box">
                    <div class="pt-progress-box-c">
                        <img src="images/pt-jd-t.png" alt="">
                    </div>
                </div>
            </div>
            <div class="pt-countdown">还剩<span>30</span>s</div>
        </div>
        <div class="pt-box">
            <ul>
                <li><img src="images/q1.png" alt=""/></li>
                <li><img src="images/q2.png" alt=""/></li>
                <li><img src="images/q3.png" alt=""/></li>
                <li><img src="images/q4.png" alt=""/></li>
                <li><img src="images/q5.png" alt=""/></li>
                <li><img src="images/q6.png" alt=""/></li>
                <li><img src="images/q7.png" alt=""/></li>
                <li><img src="images/q8.png" alt=""/></li>
                <li><img src="images/q9.png" alt=""/></li>
                <li><img src="images/q10.png" alt=""/></li>
                <li><img src="images/q11.png" alt=""/></li>
                <li><img src="images/q12.png" alt=""/></li>
            </ul>
        </div>
    </div>
    <div class="pt-countdown-alert"><span>3</span>秒后<br>开始</div>
</div>
<div class="pt-end">
    <div class="pt-end-box pt-end-success">
        <div class="pt-end-content">
            <div class="pt-end-content-title">
                <img src="images/pt-se.png" alt="">
            </div>
            <p>哇～，种一棵树竟然只用了<span></span>秒，你是青丘上神转世吗？</p>
        </div>
        <div class="pt-end-content-bg"></div>
    </div>
    <div class="pt-end-box pt-end-failure">
        <div class="pt-end-content">
            <div class="pt-end-content-title">
                <img src="images/pt-er.png" alt="">
            </div>
            <p>用时<span></span>秒！某人说你是蜗牛，让TA来试试看！</p>
        </div>
        <div class="pt-end-content-bg"></div>
    </div>
    <div class="pt-end-btn">
        <div class="pt-end-btn-bf" onclick="window.location.href=window.location.href+'?id='+10000*Math.random();">
            <img src="images/pt-bfzz.png" alt="">
        </div>
        <div class="pt-end-btn-yq">
            <img src="images/pt-yq.png" alt="">
        </div>
    </div>
    <div class="pt-end-rwm">
        <img src="images/pt-ewm.png" alt="">
    </div>
</div>
<div class="pt-bg"></div>
<div class="pt-mask"></div>
<div class="pt-fx"></div>

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript">


    // 移动端使用touch事件模拟click
    $.fn.touchClick = function (fn) {
        var startPos = null;
        for (var i = 0; i < this.length; i++) {
            this[i].addEventListener('touchstart', function (event) {
                var startTouch = event.changedTouches[0];
                startPos = {
                    x: startTouch.pageX,
                    y: startTouch.pageY,
                    time: +new Date()
                };
                event.preventDefault();
            }, false);

            this[i].addEventListener('touchmove', function (event) {
                var moveTouch = event.changedTouches[0];
                var movePos = {
                    x: moveTouch.pageX - startPos.x,
                    y: moveTouch.pageY - startPos.y
                };
            }, false);

            this[i].addEventListener('touchend', function (event) {
                var duration = +new Date() - startPos.time;
                var endTouch = event.changedTouches[0];
                var endPos = {
                    x: endTouch.pageX - startPos.x,
                    y: endTouch.pageY - startPos.y
                };
                if (duration < 500 && 20 > endPos.x > -20 && 20 > endPos.y > -20) {
                    return fn.call(this, event);//强制吧this指向调用方法的元素
                }
            }, false);
        }
    };

    var time = 3;
    var timeAn = 31;
    var isEnd = false;

    $(function () {
        $(".pt-start-btn").touchClick(function () {
            $(this).parents(".pt-start").fadeOut(200);
            $(".pt-content").css("display", "flex").animate({"opacity": 1}, 200, function () {

                var timeDjs = setInterval(function () {

                    time--;

                    $(".pt-countdown-alert").find("span").text(time);
                    if (time <= 0) {
                        clearInterval(timeDjs);
                        $(".pt-countdown-alert").fadeOut(200);

                        ptStar();

                        var timeAnFn = setInterval(function () {
                            timeAn--;
                            $(".pt-countdown").find("span").text(timeAn);
                            $(".pt-progress-box").css("width", timeAn / 30 * 100 + "%")
                            if (isEnd) {
                                clearInterval(timeAnFn);
                                $(".pt-mask").fadeIn(200);
                                var str = "";
                                if (timeAn >= 15) {
                                    str = "哇～，种一棵树竟然只用了<span>" + (30 - timeAn) + "</span>秒，你是青丘上神转世吗？";
                                } else {
                                    str = "哇靠，你牛，种一棵树只用了<span>" + (30 - timeAn) + "</span>秒，秒杀你的小伙伴啦";
                                }
                                $(".pt-end-success").find("p").html(str);
                                $(".pt-end").fadeIn(200).find(".pt-end-success").fadeIn(200);
                            } else {
                                if (timeAn <= 0) {
                                    clearInterval(timeAnFn);
                                    $(".pt-mask").fadeIn(200);
                                    $(".pt-end-failure").find("p").find("span").text(30);
                                    $(".pt-end").fadeIn(200).find(".pt-end-failure").fadeIn(200);
                                }
                            }
                        }, 1000)
                    }
                }, 1000)
            });
            $(".pt-bg").addClass("pt-mhbg");
        });
        $(".pt-start-gz").touchClick(function () {
            $(".pt-mask").fadeIn(200);
            $(".pt-gz").fadeIn(200).find(".pt-gz-close").touchClick(function () {
                $(this).parents(".pt-gz").fadeOut(200);
                $(".pt-mask").fadeOut(200);
            });
        })
        $(".pt-end-btn-yq").touchClick(function () {
            $(".pt-fx").fadeIn(200).touchClick(function () {
                $(this).fadeOut(200)
            })
        })
    });

    function ptStar() {

        var index = 1;
        var dragEle = $("ul li");
        var boxSize = [];

        $(dragEle).each(function (i) {
            var left = this.offsetLeft, top = this.offsetTop;
            $(this).animate({
                "left": left,
                "top": top
            }, 200, function () {
                if (i >= $(dragEle).length - 1) {
                    $(dragEle).css("position", "absolute")
                }
            });
            boxSize.push({x: left, y: top});
        });

        function arw(ary) {
            var arys = ary.slice(0)
            var newAry = [];
            var length = ary.length;
            var s = null;
            var eq = 0;
            for (var i = 0; i < length; i++) {
                s = Math.round(Math.random() * (arys.length - 1 - 0) + 0)
                newAry.push(arys[s]);
                arys.splice(s, 1)
            }
            for (var j = 0; j < newAry.length; j++) {
                if (newAry[j] == boxSize[j]) {
                    eq++;
                }
                if (eq > 8) {
                    newAry.reverse();
                }
            }
            return newAry
        }

        var newAry = arw(boxSize);

        $(dragEle).each(function (i) {
            $(this).animate({left: newAry[i].x, top: newAry[i].y}, 500, "linear", function () {
                Drag.newClass({
                    element: $(this),
                    dragStyle: function (ele) {
                        var left = ele[0].offsetLeft, top = ele[0].offsetTop;
                        $(ele).animate({
                            "left": left,
                            "top": top
                        }, 200);
                        ele[0].l = left;
                        ele[0].t = top;
                    },
                    dragStart: function (ele) {
                        $(ele).css({"zIndex": ++index})
                    },
                    dragging: function (ele) {
                        this.aHited = [];
                        var _this = this;
                        $(dragEle).each(function () {
                            if ($(this)[0] == ele) {
                                return true
                            }
                            if (isHited(ele, this)) {
                                _this.aHited.push(this);
                            }
                        })
                    },
                    dragEnd: function (ele) {
                        var a = this.aHited;
                        $(dragEle).removeClass("cur attr");
                        if (a && a.length) {
                            for (var i = 0; i < a.length; i++) {
                                var x = ele.offsetLeft - a[i].offsetLeft;
                                var y = ele.offsetTop - a[i].offsetTop;
                                var z = Math.pow(x, 2) + Math.pow(y, 2);
                                z = Math.sqrt(z);
                                a[i].z = z;
                                a[i].style.backgroundColor = "";
                            }
                            a.sort(function (a, b) {
                                return a.z - b.z
                            });
                            $(a).eq(0).animate({left: ele.l, top: ele.t}, 200, "linear");
                            $(ele).animate({left: a[0].l, top: a[0].t}, 200, "linear");
                            var templ = ele.l;
                            var tempt = ele.t;
                            ele.l = a[0].l;
                            ele.t = a[0].t;
                            a[0].l = templ;
                            a[0].t = tempt;
                        } else {
                            $(ele).animate({left: ele.l, top: ele.t}, 200, "linear");
                        }
                        var dex = 0;
                        $(dragEle).each(function (i) {
                            if (this.l == boxSize[i].x && this.t == boxSize[i].y) {
                                dex++;
                                if (dex >= 11) {
                                    isEnd = true;
                                }
                            }
                        })

                    }

                });

            })
        })

        function isHited(r, b) {
            if (r.offsetLeft > b.offsetLeft + b.offsetWidth || r.offsetTop > b.offsetTop + b.offsetHeight || b.offsetLeft > r.offsetLeft + r.offsetWidth || b.offsetTop > r.offsetTop + r.offsetHeight) {
                return false;
            } else {
                return true;
            }
        }
    }

    $.ajax({
        type: "GET",
        url: "http://iuu.whvtmall.com/api/iuu/mygget/BhBP8I9W5uQ=",
        success: function (msg) {
            console.log(msg);
        }
    });

</script>

</body>
</html>